{% extends 'account/base.html' %}
{% load staticfiles %}
{% block content %}
<!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Profile
            <small>Change any personal informaion here</small>
        </h1>
        <ol class="breadcrumb">
            <li>
                <i class="fa fa-university"></i>  <a href="/courses">Registrar</a>
            </li>
            <li>
                <i class="fa fa-compass"></i> {{ user.first_name }} {{ user.last_name }}
            </li>
            <li class="active">
                <i class="fa fa-user"></i> Profile
            </li>
        </ol>
    </div>
</div>
<!-- /.row -->

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">General Information</h3>
            </div>
            <div class="panel-body">
                        
            {% include "account/profile/form.html" with form=form %}
                        
            <!-- Error Message Box -->
            <div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
            </div><!-- /.Error Message Box -->
            
            <button onclick="ajax_update_user();"
                         id="update_user_btn"
                       name="update_user_btn"
                       type="button"
                      class="btn btn-lg btn-primary">Save</button>
            </div>
        </div>
    </div><!-- /.col-sm-12 -->
</div><!-- /.row -->

<script>
    function ajax_update_user()
    {
        $('#update_user_btn').prop("disabled", true); // Lock button
        $.ajax( 'update_user', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'first_name': $('#id_first_name').val(),
               'last_name': $('#id_last_name').val(),
               'email': $('#id_email').val()
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               if (result.status != 'success')
               {
                    print_error(result.message);
               }
               else
               {
                    window.location = "";
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
               $('#update_user_btn').prop("disabled", false); // Unlock button
            }
        });
    }

/**
 * Prints a error box with the contents of the errors received from the server.
 */
function print_error(json_result)
{
    $('#error_box').prop("hidden", false); // Display error box.
    
    // Iterate through the JSON array of arrays and generate an error string.
    var message = "<b>Error(s):</b><hr/>";
    var data = $.parseJSON(json_result)
    for (var key in data) {
        if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
            message += "<p>" + key + ": " + data[key] + "<p>";
        }
    }
    
    // Replace the error string with the contents of the error box.
    $('#error_box').html(message);
}

</script>
{% endblock content %}
